@rem:40rem;
body,h1,h2,h3,p,button,figure,ul{
    padding: 0;
    margin: 0;
}
button{
    border: none;
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none;
}
@font-face{
    font-family: 'MynewFont';
    src: url(../../fonts/Courgette-Regular-webfont.ttf);
}
@font-face{
     font-family: 'nFont';
    src: url(../../fonts/Oswald-Bold-webfont.ttf);
}
@font-face{
    font-family: 'pFont';
    src: url(../../fonts/Quantico-Bold-webfont.ttf);
}
@font-face{
    font-family: 'rFont';
    src: url(../../fonts/2DA5DD_0_0.ttf);
}
/*默认字体*/
body{
    //font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
    //min-width: 640/@rem;
    //height: 1136/@rem;
}
/*禁止字体缩放  以及  长按文字选中(安卓下无效)*/
body *{
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
}
/*清除阴影*/
a,input,button{
    -webkit-tap-highlight-color:rgba(0,0,0,0) ;
}
/*清除圆角*/
input,button{
    -webkit-appearance: none;
    border-radius: 0;
}
/*动画*/
@keyframes get{
    0%{
        opacity: 0;
        transform: translateX(-20/@rem);
    }
    100%{opacity: 1;transform: translateX(0/@rem);}
}

@keyframes player{
    0%{opacity: 0;transform: translateX(-30/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
.player-1{
    animation: fig1 1s ease both;
}
.player-2{
    animation: fig2 1s ease 0.25s both;
} 
.player-3{
    animation: fig3 1s ease 0.5s both;
}       
.player-4{
    animation: fig4 1s ease 0.75s both;
} 
.player-5{
    animation: fig5 1s ease 1s both;
}  
//浮现动画
@keyframes fig1{
    0%{opacity: 0;transform: translateX(20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes fig2{
    0%{opacity: 0;transform: translateX(20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes fig3{
    0%{opacity: 0;transform: translateX(20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes fig4{
    0%{opacity: 0;transform: translateX(20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes fig5{
    0%{opacity: 0;transform: translateX(20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
//字体的渐变动画
@keyframes na1{
    0%{opacity: 0;transform: translateX(-20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes na2{
    0%{opacity: 0;transform: translateX(-20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes na3{
    0%{opacity: 0;transform: translateX(-20/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
@keyframes na4{
    0%{opacity: 0;transform: translateX(-45/@rem);}
    100%{opacity: 1;transform: translateX(0/@rem);}
}
//页面跳动
@keyframes box{
    0%{transform: translateY(500/@rem);}
    100%{transform: translateY(0/@rem);}
}
//关闭掉下的动画
@keyframes mov{
    0%{transform:rotate(0deg) translateY(0/@rem);}
    100%{transform:rotate(-10deg) translateY(2000/@rem);}
}
//展开掉下的动画
@keyframes shake{
    0%{transform:rotate(90deg);}
    75%{transform:rotate(-10deg);}
    100%{transform:rotate(0deg);}    
}
//篮球的反弹动画
@keyframes jop{
    0%{transform:translateY(-300/@rem);}
    50%{transform:translateY(-100/@rem);}
    75%{transform:translateY(-200/@rem);}
    100%{transform:translateY(-100/@rem);}
}
//篮球旋转动画
@keyframes roun{
    // 0%{transform:rotate(0deg);}
    // 12.5%{transform:rotate(45deg);}
    // 25%{transform:rotate(90deg);}
    // 37.5%{transform:rotate(135deg);}
    // 50%{transform:rotate(180deg);}
    // 62.5%{transform:rotate(225deg);}
    // 75%{transform:rotate(270deg);}
    // 87.5%{transform:rotate(315deg);}
    //100%{transform:rotate(360deg);}

}
//字体收缩动画
@keyframes pet{
   0%{transform: rotateY(90deg);visibility: hidden;letter-spacing: -15/@rem;}
   50%{letter-spacing: 5/@rem;;visibility: visible;}
   100%{transform: rotateY(0deg);letter-spacing: 0;}
}
//字体从里往外晃动
@keyframes inner{
     0%{transform:  translateZ(100/@rem) rotateX(-45deg);}
     25%{transform:  translateZ(100/@rem) rotateX(35deg);}
     50%{transform:  translateZ(100/@rem) rotateX(-35deg);}
     75%{transform:  translateZ(100/@rem) rotateX(15deg);}
    100%{transform:  translateZ(100/@rem) rotateX(0deg);}
}
@keyframes yp{
     0%{opacity: 0;letter-spacing: -15/@rem;}
    100%{opacity: 1;letter-spacing: 0;}
}
@keyframes soc{
     0%{transform:  translateZ(100/@rem) rotateX(-45deg);opacity: 0;}
     25%{transform:  translateZ(100/@rem) rotateX(25deg);opacity: 1;}
     50%{transform:  translateZ(100/@rem) rotateX(-15deg);}
     75%{transform:  translateZ(100/@rem) rotateX(15deg);}
    100%{transform:  translateZ(100/@rem) rotateX(0deg);}
}
@keyframes win{
     0%{transform: scale(0.1);opacity: 0;}
    100%{transform: scale(1);opacity: 1;}
}
/*返回人物列表*/
.pickPage-box #pickPage-player nav a:nth-of-type(1){
    background-image:url(../../image/pickPage/pickPage-backlist.jpg) ;
}
.down{
    animation: mov 1s ease both;
}
.shake{
     animation: shake 0.5s ease both;
}
.active{
   animation:box 0.5s ease both; 
}
.pickPage .pickPage-select .up{
    background-color:#fff !important;
}
.pickPage .pickPage-select .up figcaption{
    top:0 !important;
}
.pickPage .pickPage-select .up img{
    top:50/@rem !important;
}

.portrait {
    /*游戏人物选择页*/
    .pickPage{
        width: 100%;
        //height: 100%;
        background: #ffe4be;
        overflow: hidden;
        position: relative;
        animation:box 0.5s ease both;
        //游戏模式选择页
        #modelPage{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 1136/@rem;
            background: url(../../image/pickPage/rolePag-bg.gif);
            z-index: 3;
            display: none;
            transform-origin: top right;
            transform: rotate(0deg);
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }
            h1{
                float: left;
                margin:100/@rem 0 50/@rem;
                font-family: 'MynewFont';
                line-height: 60/@rem;
                font-size: 58/@rem;
                color: #d8583a;
                width: 100%;
                text-align: center;
                animation: pet 0.75s ease-in-out 0.5s both;
            }
            .modelPageInner{
                float: left;
                width: 560/@rem;
                padding: 0 40/@rem;
                height: 560/@rem;
                a{
                    margin: 30/@rem auto;
                    font-family: 'MynewFont';
                    display: block;
                    width: 300/@rem;
                    height: 80/@rem;
                    border-radius:40/@rem ;
                    text-align: center;
                    font-size: 30/@rem;
                    line-height: 80/@rem;
                    font-weight:bold ;
                    background: #fff;
                    color: #FF9800;
                }
                a.selected{
                    color: #FFFF00;
                    background: rgba(255, 87, 34, 0.88);
                }
                span{
                    display: block;
                    margin: 100/@rem auto 0;
                    text-align: center;
                    width: 200/@rem;
                    height: 100/@rem;
                    border-radius: 40/@rem;
                    line-height: 100/@rem;
                    font-weight: bold;
                    background: #eda949;
                    &.active {
                        box-shadow: inset 0 0 0.8rem rgba(0,0,0,0.7)
                    }
                }
            }
            .modelPage_ball{
                width: 120/@rem;
                height: 120/@rem;
                position: absolute;
                bottom: 100/@rem;
                left: 0;
                right: 0;
                margin: auto;
                animation: jop 0.75s ease-out both 0.5s;
                img{
                    animation: rotateZ360 0.75s linear infinite;
                    width: 120/@rem;
                    height: 120/@rem;
                }
            }
        }
        //个人详情页
        #pickPage-player{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 1136/@rem;
            background: #ffe4be;
            z-index: 2;
            transform-origin: top right;
            transform: rotate(90deg);
            transition: all 0.5s;
            display: none;
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }
            //个人信息
            .player-details{
                width: 372/@rem;
                height: 476/@rem;
                padding: 0 60/@rem;
                border: 10/@rem solid #eca745;
                margin: 0 auto;
                background: url(../../image/pickPage/rolePag-bg.gif);
                background-size: 50/@rem 50/@rem;
                position: relative;
                //名字
                h1{
                    line-height: 156/@rem;
                    font-size: 130/@rem;
                    letter-spacing: -20/@rem;
                    width: 100%;
                    font-family: 'rfont';
                    color: #d54e30;
                    font-weight: normal;
                    text-align: left;
                    animation:na1 1s ease both;
                }
                //位置
                h3{
                    line-height: 76/@rem;
                    width: 100%;
                    text-indent: 16/@rem;
                    font-size: 32/@rem;
                    font-family: 'rfont';
                    color: #d65233;
                    letter-spacing: -4/@rem;
                    animation:na2 1.25s ease 0.25s both;
                }
                //球员特质
                p{
                    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
                    line-height: 38/@rem;
                    font-size: 28/@rem;
                    color: #d3482b;
                    padding:0 16/@rem ;
                    width: 340/@rem;
                    font-weight: 700;
                    letter-spacing: -2/@rem;
                    animation:na3 1.5s ease 0.5s both;
                }
                //号码
                .player-num{
                    width: 100/@rem;
                    color: #eca745;
                    text-align: right;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    animation:na4 1s ease 1s both;
                    strong{
                        font-size: 120/@rem;
                        color: #eca745;
                    }
                }
            }
            //球员
            .player-ico{
                position: absolute;
                right: 0;
                top: 100%;
                transform: translateY(-100%);
                img{
                    width: 452/@rem;
                    height: 568/@rem;
                }
            }
        }
        //有关于按钮
        .pickPage-about{
            position: absolute;
            width: 100/@rem;
            height: 100/@rem;
            line-height: 2.5rem;
            right: 0;
            top: 0;
            background: #eda949;
            color: #fff;
            font-size:26/@rem;
            text-align: center;
            font-weight: bold;
            font-family: 'nFont';
            z-index:1;
        }
        //标题
        h2{
            font-family: 'rfont';
            position: absolute;
            top: 60/@rem;
            left: 0;
            width: 100%;
            height: 132/@rem;
            text-align: center;
            line-height: 84/@rem;
            font-size: 88/@rem;
            color: #d54e30;
            letter-spacing: 5/@rem;
            font-weight: normal;
            animation: get 1s ease 0.5s both;
            span{
                display: block;
                text-align: center;
                color: #eda94a;
                width: 100%;
                height: 48/@rem;
                line-height: 48/@rem;
                font-size: 44/@rem;
                text-shadow: 4/@rem 4/@rem 4/@rem #eda94a;
                -webkit-text-stroke: 0.5/@rem #fff;
                font-weight: bolder;
                letter-spacing: -5/@rem;
                animation:player 1s ease 1s both;
            }
        }
        /*球员列表*/
        .pickPage-select{
            width: 348/@rem;
            height: 534/@rem;
            position: absolute;
            left: 156/@rem;
            top: 218/@rem;
            div{
                figure{
                    width: 164/@rem;
                    height: 166/@rem;
                    float: left;
                    margin: 0 10/@rem 10/@rem 0;
                    overflow: hidden;
                    background-color: #eda949;
                    font-family: 'CoreCircusPierrot2';
                    position: relative;
                    top:10/@rem;
                    left: 3/@rem;
                    figcaption{
                        width: 100%;
                        height: 65/@rem;
                        line-height: 65/@rem;
                        color: #d13d1a;
                        font-size: 28/@rem;
                        text-shadow: 2/@rem 2/@rem 2/@rem #d13d1a;
                        text-align: center;
                        position: absolute;
                        top: -65/@rem;
                        left: 0;

                    }
                    img{
                        transition: all 0.3s;
                        position: absolute;
                        top: 30/@rem;
                        left: -30/@rem;
                        width: 224/@rem;
                        height: 298/@rem;
                    }
                }
            }
            div:nth-of-type(5){
                margin:0 82/@rem;
            }
        }
        //底部导航
        nav{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 144/@rem;
            width: 100%;
            a{
                display: block;
                height: 74/@rem;
                line-height: 74/@rem;
                padding-top: 70/@rem;
                text-align: center;
                font-size: 26/@rem;
                color: #d3462a;
                font-weight: 700;
                white-space: nowrap;
                font-family: 'nFont';
            }
            a:nth-of-type(1){
                background:#fad5a1 url(../../image/pickPage/pickPage-backtop.jpg) no-repeat center 34/@rem;
                float: left;
                width: 134/@rem;
                letter-spacing: -3/@rem;
            }
            a:nth-of-type(2){
                background:#fad5a1 url(../../image/pickPage/pickPage-ball.jpg) no-repeat center 16/@rem;
                float: right;
                width: 496/@rem;
            }
        }
    }
    //得分榜页
    .scorePageBox {
        display: none;
        .rank {
            position: absolute;
            left: 0;
            top:100%;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            display: block;
            height: 74/@rem;
            line-height: 74/@rem;
            padding-top: 70/@rem;
            text-align: center;
            font-size: 0.9rem;
            color: #d3462a;
            font-weight: 700;
            white-space: nowrap;
            font-family: 'nFont';
            background:#fad5a1 url(../../image/pickPage/scroll-down.jpg) no-repeat center 34/@rem;
            width: 134/@rem;
            z-index:6;
        }
        #scorePage{
            transform-style: preserve-3d;
            perspective: 800/@rem;
            position: absolute;
            left: 0;
            top: 0;
            height: 676/@rem;
            padding: 230/@rem 0;
            width: 100%;
            background: #d8583a;
            z-index: 5;
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }

            h3{
                margin-top: 65/@rem;
                line-height: 60/@rem;
                font-size: 34/@rem;
                font-weight: normal;
                color: #eda949;
                font-family: 'rFont';
                text-align: center;
                letter-spacing: 3/@rem;
                transform-origin: top;
                animation: inner 1.5s ease both;
            }
            .scorePageYc{
                line-height: 60/@rem;
                text-align: center;
                color: #fff;
                font-size: 36/@rem;
                font-family: 'MynewFont';
                animation: yp 0.5s ease both 0.5s;
            }
            .scorePagePt{
                overflow: hidden;
                color: #b5391c;;
                line-height: 60/@rem;
                text-align: center;
                font-size: 34/@rem;
                font-family: 'rFont';
                letter-spacing: 3/@rem;
                animation: yp 0.5s ease both 0.5s;
            }
            .scorePageAccount{
                animation: soc 1.5s ease both 1s;
                transform-origin: top center;
                .account{
                    overflow: hidden;
                    .accountPos1{
                        margin: 10/@rem auto;
                        width: 250/@rem;
                        overflow: hidden;
                        span{
                            display:block;
                            float: left;
                            height: 120/@rem;
                            width: 120/@rem;
                            background: #b3371a;
                            position: relative;
                            strong{
                                display: block;
                                height: 120/@rem;
                                width: 120/@rem;
                                line-height: 120/@rem;
                                text-align: center;
                                background: #c64b2e;
                                position: absolute;
                                left: 8/@rem;
                                top: 8/@rem;
                                color: #fff;
                                font-size: 72/@rem;
                                font-weight: bold;
                                font-family: 'pFont';
                            }
                        }
                        span:nth-of-type(1){
                            margin-right: 10/@rem;
                        }
                    }
                    .accountPos2{
                        overflow: hidden;
                        width: 100%;
                        font-family: 'MynewFont';
                        font-size: 32/@rem;
                        text-align: center;
                        line-height: 46/@rem;
                        color: #eca748;
                    }
                }
            }
        }
    }
    //排行榜页
    .rankPageBox {
        display: none;
        #rankPage{
            position: absolute;
            height: 100%;
            width: 100%;
            background: url(../../image/pickPage/rankPage-bg.gif);
            background-size: 50/@rem 50/@rem;
            z-index: 6;
            .rankPageInner{
                padding-top:20/@rem;
                margin: 0 auto;
                overflow: hidden;
                width: 600/@rem;
                h1{
                    width: 80%;
                    line-height: 54/@rem;
                    font-size: 40/@rem;
                    text-align: center;
                    font-weight: normal;
                    color: #d65237;
                    font-family: 'rFont';
                    letter-spacing: -5/@rem;
                }
                h3{
                    width: 90%;
                    line-height: 48/@rem;
                    font-size: 40/@rem;
                    text-align: center;
                    font-weight: normal;
                    color: #d65237;
                    font-family: 'rFont';
                    letter-spacing: -5/@rem;
                }
                p{
                    line-height: 84/@rem;
                    font-family: 'MynewFont';
                    color: #d65237;
                    animation: pet 0.75s ease-in-out 0.75s both;
                    font-size: 48/@rem;
                    text-align: center;
                    font-weight: 600;
                }
                .rankPageMg{
                    display: block;
                    line-height: 88/@rem;
                    height: 88/@rem;
                    width:100%;
                    background: #eda949;
                    color: #fff;
                    font-family: 'nfont';
                    text-align: center;
                    font-size: 28/@rem;
                    margin-bottom: 20/@rem;
                }
                .rankPageMg::before{
                    content: 'f';
                    color: #ffc97e;
                    float: left;
                    font-size: 48/@rem;
                    text-indent: 70/@rem;
                }
                .rankPageMc{
                    display: block;
                    line-height: 88/@rem;
                    height: 88/@rem;
                    width: 100%;
                    background: #d8583a;
                    color: #fff;
                    font-family: 'nfont';
                    text-align: center;
                    font-size: 28/@rem;
                }
                .rankPageMc::before{
                    content: 'f';
                    color: #ffc97e;
                    float: left;
                    font-size: 48/@rem;
                    text-indent: 70/@rem;
                }
                .rankPageTw{
                    text-align: center;
                    display: block;
                    line-height: 72/@rem;
                    height: 72/@rem;
                    width: 100%;
                    font-size: 32/@rem;
                    font-family: 'nfont';
                    color: #000000;
                }
            }
            nav{
                position: absolute;
                left: 0;
                top:100%;
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
                width: 134/@rem;
                height: 298/@rem;
                a{
                    width: 134/@rem;
                    display: block;
                    height: 74/@rem;
                    line-height: 74/@rem;
                    padding-top: 70/@rem;
                    text-align: center;
                    font-size: 26/@rem;
                    color: #d3462a;
                    font-weight: 700;
                    white-space: nowrap;
                    font-family: 'nFont';
                }
                a:nth-of-type(1){
                    background:#fad5a1 url(../../image/pickPage/pickPage-backtop.jpg) no-repeat center 34/@rem;
                    float: left;
                    width: 134/@rem;
                    letter-spacing: -3/@rem;
                    margin-bottom: 10/@rem;
                }
                a:nth-of-type(2){
                    background:#fad5a1 url(../../image/pickPage/pickPage-ball.jpg) no-repeat center 16/@rem;
                    float: right;
                }
            }
            .rankPageGt{
                position: absolute;
                right: 78/@rem;
                bottom: 0;
                img{
                    height: 298/@rem;
                }
            }
            .rankPageCup{
                position: absolute;
                left: 245/@rem;
                bottom: 0;
                img{
                    animation: win 1s ease both;
                    height: 150/@rem;
                }
            }
        }
    }
}
.landscape {

    .pickPage{
        width: 100%;
        //height: 100%;
        background: #ffe4be;
        overflow: hidden;
        position: relative;
        animation:box 0.5s ease both;
        //人物详情
         .player-details{
         width: 372/@rem;
         height: 476/@rem;
         padding: 0 60/@rem;
         border: 10/@rem solid #eca745;
         float: left;
         background: url(../../image/pickPage/rolePag-bg.gif);
         background-size: 50/@rem 50/@rem;
         position: relative;
             //名字
             h1{
                 line-height: 156/@rem;
                 font-size: 130/@rem;
                 letter-spacing: -20/@rem;
                 width: 100%;
                 font-family: 'rfont';
                 color: #d54e30;
                 font-weight: normal;
                 text-align: left;
                 animation:na1 1s ease both;
             }
             //位置
             h3{
                 line-height: 76/@rem;
                 width: 100%;
                 text-indent: 16/@rem;
                 font-size: 32/@rem;
                 font-family: 'rfont';
                 color: #d65233;
                 letter-spacing: -4/@rem;
                 animation:na2 1.25s ease 0.25s both;
             }
             //球员特质
             p{
                 font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
                 line-height: 38/@rem;
                 font-size: 28/@rem;
                 color: #d3482b;
                 padding:0 16/@rem ;
                 width: 340/@rem;
                 font-weight: 700;
                 letter-spacing: -2/@rem;
                 animation:na3 1.5s ease 0.5s both;
             }
             //号码
             .player-num{
                 width: 100/@rem;
                 color: #eca745;
                 text-align: right;
                 position: absolute;
                 right: 0;
                 bottom: 0;
                 animation:na4 1s ease 1s both;
                 strong{
                     font-size: 120/@rem;
                     color: #eca745;
                 }
             }
              .player-ico{
                         position: absolute;
                         right: 120/@rem;
                         top: 5%;
                         img{
                             width: 452/@rem;
                             height: 468/@rem;
                         }
                     }
         }
        //排行榜页
        #rankPage{
            position: absolute;
            height: 100%;
            width: 100%;
            background: url(../../image/pickPage/rankPage-bg.gif);
            background-size: 50/@rem 50/@rem;
            z-index: 6;
            display: none;
            .rankPageInner{
                padding-top:20/@rem;
                margin: 0 auto;
                overflow: hidden;
                width: 600/@rem;
                h1{
                    width: 80%;
                    line-height: 54/@rem;
                    font-size: 40/@rem;
                    text-align: center;
                    font-weight: normal;
                    color: #d65237;
                    font-family: 'rFont';
                    letter-spacing: -5/@rem;
                }
                h3{
                    width: 90%;
                    line-height: 48/@rem;
                    font-size: 40/@rem;
                    text-align: center;
                    font-weight: normal;
                    color: #d65237;
                    font-family: 'rFont';
                    letter-spacing: -5/@rem;
                }
                p{
                    line-height: 84/@rem;
                    font-family: 'MynewFont';
                    color: #d65237;
                    animation: pet 0.75s ease-in-out 0.75s both;
                    font-size: 48/@rem;
                    text-align: center;
                    font-weight: 600;
                }
                .rankPageMg{
                    display: block;
                    line-height: 88/@rem;
                    height: 88/@rem;
                    width:100%;
                    background: #eda949;
                    color: #fff;
                    font-family: 'nfont';
                    text-align: center;
                    font-size: 28/@rem;
                    margin-bottom: 20/@rem;
                }
                .rankPageMg::before{
                    content: 'f';
                    color: #ffc97e;
                    float: left;
                    font-size: 48/@rem;
                    text-indent: 70/@rem;
                }
                .rankPageMc{
                    display: block;
                    line-height: 88/@rem;
                    height: 88/@rem;
                    width: 100%;
                    background: #d8583a;
                    color: #fff;
                    font-family: 'nfont';
                    text-align: center;
                    font-size: 28/@rem;
                }
                .rankPageMc::before{
                    content: 'f';
                    color: #ffc97e;
                    float: left;
                    font-size: 48/@rem;
                    text-indent: 70/@rem;
                }
                .rankPageTw{
                    text-align: center;
                    display: block;
                    line-height: 72/@rem;
                    height: 72/@rem;
                    width: 100%;
                    font-size: 32/@rem;
                    font-family: 'nfont';
                    color: #000000;
                }
            }
            nav{
                position: absolute;
                left: 0;
                top:100%;
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
                width: 134/@rem;
                height: 298/@rem;
                a{
                    width: 134/@rem;
                }
                a:nth-of-type(1){
                    margin-bottom: 10/@rem;
                }
            }
            .rankPageGt{
                position: absolute;
                right: 78/@rem;
                bottom: 0;
                img{
                    height: 298/@rem;
                }
            }
            .rankPageCup{
                position: absolute;
                left: 245/@rem;
                bottom: 0;
                img{
                    animation: win 1s ease both;
                    height: 150/@rem;
                }
            }
        }
        //得分榜页
        #scorePage{
            transform-style: preserve-3d;
            perspective: 800/@rem;
            position: absolute;
            left: 0;
            top: 0;
            height: 676/@rem;
            padding: 230/@rem 0;
            width: 100%;
            background: #d8583a;
            z-index: 5;
            display: none;
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }
            a{
                position: absolute;
                left: 0;
                top:100%;
                -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
                display: block;
                height: 74/@rem;
                line-height: 74/@rem;
                padding-top: 70/@rem;
                text-align: center;
                font-size: 0.9rem;
                color: #d3462a;
                font-weight: 700;
                white-space: nowrap;
                font-family: 'nFont';
                background:#fad5a1 url(../../image/pickPage/scroll-down.jpg) no-repeat center 34/@rem;
                width: 134/@rem;
            }
            h3{
                margin-top: 65/@rem;
                line-height: 60/@rem;
                font-size: 34/@rem;
                font-weight: normal;
                color: #eda949;
                font-family: 'rFont';
                text-align: center;
                letter-spacing: 3/@rem;
                transform-origin: top;
                animation: inner 1.5s ease both;
            }
            .scorePageYc{
                line-height: 60/@rem;
                text-align: center;
                color: #fff;
                font-size: 36/@rem;
                font-family: 'MynewFont';
                animation: yp 0.5s ease both 0.5s;
            }
            .scorePagePt{
                overflow: hidden;
                color: #b5391c;;
                line-height: 60/@rem;
                text-align: center;
                font-size: 34/@rem;
                font-family: 'rFont';
                letter-spacing: 3/@rem;
                animation: yp 0.5s ease both 0.5s;
            }
            .scorePageAccount{
                animation: soc 1.5s ease both 1s;
                transform-origin: top center;
                .account{
                    overflow: hidden;
                    .accountPos1{
                        margin: 10/@rem auto;
                        width: 250/@rem;
                        overflow: hidden;
                        span{
                            display:block;
                            float: left;
                            height: 120/@rem;
                            width: 120/@rem;
                            background: #b3371a;
                            position: relative;
                            strong{
                                display: block;
                                height: 120/@rem;
                                width: 120/@rem;
                                line-height: 120/@rem;
                                text-align: center;
                                background: #c64b2e;
                                position: absolute;
                                left: 8/@rem;
                                top: 8/@rem;
                                color: #fff;
                                font-size: 72/@rem;
                                font-weight: bold;
                                font-family: 'pFont';
                            }
                        }
                        span:nth-of-type(1){
                            margin-right: 10/@rem;
                        }
                    }
                    .accountPos2{
                        overflow: hidden;
                        width: 100%;
                        font-family: 'MynewFont';
                        font-size: 32/@rem;
                        text-align: center;
                        line-height: 46/@rem;
                        color: #eca748;
                    }
                }
            }
        }
        //游戏模式选择页
        #modelPage{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 1136/@rem;
            background: url(../../image/pickPage/rolePag-bg.gif);
            z-index: 3;
            display: none;
            transform-origin: top right;
            transform: rotate(0deg);
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }
            h1{
                float: left;
                margin:100/@rem 0 50/@rem;
                font-family: 'MynewFont';
                line-height: 60/@rem;
                font-size: 58/@rem;
                color: #d8583a;
                width: 100%;
                text-align: center;
                animation: pet 0.75s ease-in-out 0.5s both;
            }
            .modelPageInner{
                float: left;
                width: 560/@rem;
                margin-left: 6rem;
                padding: 0 40/@rem;
                a{
                    margin: 30/@rem auto;
                    font-family: 'MynewFont';
                    display: block;
                    width: 300/@rem;
                    height: 80/@rem;
                    border-radius:40/@rem ;
                    text-align: center;
                    font-size: 30/@rem;
                    line-height: 80/@rem;
                    font-weight:bold ;
                    background: #fff;
                    color: red;
                }
                a:hover{
                    color: #FFFF00;
                    background: red;
                }
                span{
                    display: block;
                    margin-left: 175/@rem;
                    text-align: center;
                    width: 200/@rem;
                    height: 100/@rem;
                    border-radius: 40/@rem;
                    line-height: 100/@rem;
                    font-weight: bold;
                    background: #eda949;
                }
            }
            .modelPage_ball{
                display: none;
                width: 120/@rem;
                height: 120/@rem;
                position: absolute;
                top: 13rem;
                right: 0;
                animation: jop 0.75s ease-out both 0.5s;
                img{
                    animation: roun 0.75s infinite;
                    width: 120/@rem;
                    height: 120/@rem;
                }
            }
        }
        //个人详情页
        #pickPage-player{
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 1136/@rem;
            background: #ffe4be;
            z-index: 2;
            transform-origin: top right;
            transform: rotate(90deg);
            transition: all 0.5s;
            display: none;
            button{
                position: absolute;
                width: 100/@rem;
                height: 100/@rem;
                right: 0;
                top: 0;
                background: #eda949;
                color: #fff;
                font-size:26/@rem;
                text-align: center;
                font-weight: bold;
                font-family: 'nFont';
                z-index: 2;
            }
            //个人信息
            .player-details{
                width: 372/@rem;
                height: 476/@rem;
                padding: 0 60/@rem;
                border: 10/@rem solid #eca745;
                margin: 0 auto;
                background: url(../../image/pickPage/rolePag-bg.gif);
                background-size: 50/@rem 50/@rem;
                position: relative;
                //名字
                h1{
                    line-height: 156/@rem;
                    font-size: 130/@rem;
                    letter-spacing: -20/@rem;
                    width: 100%;
                    font-family: 'rfont';
                    color: #d54e30;
                    font-weight: normal;
                    text-align: left;
                    animation:na1 1s ease both;
                }
                //位置
                h3{
                    line-height: 76/@rem;
                    width: 100%;
                    text-indent: 16/@rem;
                    font-size: 32/@rem;
                    font-family: 'rfont';
                    color: #d65233;
                    letter-spacing: -4/@rem;
                    animation:na2 1.25s ease 0.25s both;
                }
                //球员特质
                p{
                    font-family: 'Oswald', 'Arial', 'Helvetica', sans-serif;
                    line-height: 38/@rem;
                    font-size: 28/@rem;
                    color: #d3482b;
                    padding:0 16/@rem ;
                    width: 340/@rem;
                    font-weight: 700;
                    letter-spacing: -2/@rem;
                    animation:na3 1.5s ease 0.5s both;
                }
                //号码
                .player-num{
                    width: 100/@rem;
                    color: #eca745;
                    text-align: right;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    animation:na4 1s ease 1s both;
                    strong{
                        font-size: 120/@rem;
                        color: #eca745;
                    }
                }
            }

        }
        //有关于按钮
        .pickPage-about{
            position: absolute;
            width: 100/@rem;
            height: 100/@rem;
            line-height: 2.5rem;
            right: 0;
            top: 0;
            background: #eda949;
            color: #fff;
            font-size:26/@rem;
            text-align: center;
            font-weight: bold;
            font-family: 'nFont';
            z-index:1;
        }
        //标题
        h2{
            font-family: 'rfont';
            position: absolute;
            top: 60/@rem;
            left: 0;
            width: 100%;
            height: 132/@rem;
            text-align: center;
            line-height: 84/@rem;
            font-size: 88/@rem;
            color: #d54e30;
            letter-spacing: 5/@rem;
            font-weight: normal;
            animation: get 1s ease 0.5s both;
            span{
                display: block;
                text-align: center;
                color: #eda94a;
                width: 100%;
                height: 48/@rem;
                line-height: 48/@rem;
                font-size: 44/@rem;
                text-shadow: 4/@rem 4/@rem 4/@rem #eda94a;
                -webkit-text-stroke: 0.5/@rem #fff;
                font-weight: bolder;
                letter-spacing: -5/@rem;
                animation:player 1s ease 1s both;
            }
        }
        /*球员列表*/
        .pickPage-select {
            width: 880/@rem;
            height: 166/@rem;
            position: absolute;
            left: 156/@rem;
            top: 220/@rem;
            div {
                figure {
                    width: 164/@rem;
                    height: 166/@rem;
                    float: left;
                    margin: 0 10/@rem 0 0;
                    overflow: hidden;
                    background-color: #eda949;
                    font-family: 'CoreCircusPierrot2';
                    position: relative;
                    top: 10/@rem;
                    left: 3/@rem;
                    figcaption {
                        width: 100%;
                        height: 65/@rem;
                        line-height: 65/@rem;
                        color: #d13d1a;
                        font-size: 28/@rem;
                        text-shadow: 2/@rem 2/@rem 2/@rem #d13d1a;
                        text-align: center;
                        position: absolute;
                        top: -65/@rem;
                        left: 0;

                    }
                    img {
                        transition: all 0.3s;
                        position: absolute;
                        top: 30/@rem;
                        left: -30/@rem;
                        width: 224/@rem;
                        height: 298/@rem;
                    }
                }
            }
        }
        //底部导航
        nav {
            position: absolute;
            left: 0;
            top: 15%;
            width: 134/@rem;
            height: 298/@rem;
            a {
                display: block;
                height: 74/@rem;
                line-height: 74/@rem;
                padding-top: 70/@rem;
                text-align: center;
                font-size: 26/@rem;
                color: #d3462a;
                font-weight: 700;
                letter-spacing: -2/@rem;
                font-family: 'nFont';
                width: 134/@rem;
            }
            a:nth-of-type(1) {
                margin-bottom: 10/@rem;
                background: #fad5a1 url(../../image/pickPage/pickPage-backtop.jpg) no-repeat center 34/@rem;
            }
            a:nth-of-type(2) {
                background: #fad5a1 url(../../image/pickPage/pickPage-ball.jpg) no-repeat center 16/@rem;
            }

        }
    }


}

    
